<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>吸顶方法二</title>
    <link rel="stylesheet" href="./03三行布局导航吸顶 - 方法二.css">

    <script>
        let header = document.getElementsByClassName('header'),
            content = document.getElementsByClassName('content'),
            footer = document.getElementsByClassName('footer');
            header.style.color = "blue";
        //先使用js中获取进度条位置的属性scrollTop，她的兼容写法为
        //运用逻辑短路的方法，当 || 前面的属性不能拿到正确的值时，那么就用 || 后面的属性获取值

        //let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //调用窗口滚动对象window.onscroll

        window.onscroll = function(){
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop > 100){
                header.style.color = "blue";
                
            }
        }






    </script>
</head>
<body>
    <div class="header sticky-nav">123</div>
    <div class="content">
        参考文章1：
        <a href="https://blog.csdn.net/echo_233/article/details/105011316" target="_blank">参考文章原文</a><br/>
        参考文章2：
        <a href="https://www.cnblogs.com/lyt0207/p/12498691.html" target="_blank">参考文章原文</a><br/>

        原生js


    <div class="box">
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
        高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>高度由内容撑高<br/>
    </div>
    </div>
    <div class="footer"></div>
</body>
</html>